@import "vxe-table/styles/index.scss";

.merak-table-container {
  --merak-table-header-size: 12px;
  --merak-table-size: 13px;
  --merak-table-weight: 400;
  --merak-table-line-height: 1.5;
  --merak-table-cell-padding: 16px;
  --merak-table-row-cell-padding: 8px;
  --merak-table-header-color: #646567;
  --merak-table-header-bg: #f5f8fa;
  --merak-table-row-color: #303133;
  --merak-table-row-hover: #f0f5ff;
  --merak-table-row-bg-color: #fff;
  --merak-table-border-color: #f0f2f4;
  --merak-table-resizable-color: #b3b5b9;
  &.el-table {
    // padding: 10px;
    font-size: var(--merak-table-size);
    font-family: var(--el-font-family);
    &.el-table--border {
      &::before,
      &::after {
        width: 0;
      }
      .el-table__inner-wrapper {
        &::before,
        &::after {
          height: 0;
        }
        .el-table__border-left-patch {
          width: 0;
        }
        .el-table__header {
          .el-table__cell {
            border-bottom: none;
          }
        }
        .el-table__cell {
          border-right: none;
        }
      }
    }
    .el-table__inner-wrapper::before {
      height: 0;
    }
    .el-table__header {
      tr {
        height: 40px;
        color: var(--merak-table-header-color);
        font-size: var(--merak-table-header-size);
        font-weight: var(--merak-table-weight);
        background-color: var(--merak-table-header-bg);
        .el-table__cell {
          font-weight: inherit;
          background-color: transparent;
          .cell {
            padding-left: var(--merak-table-cell-padding);
            padding-right: var(--merak-table-cell-padding);
          }
        }
      }
    }
    .el-table__body {
      &-header {
        tr {
          height: 40px;
          color: var(--merak-table-header-color);
          font-size: var(--merak-table-header-size);
          font-weight: var(--merak-table-weight);
          background-color: var(--merak-table-header-bg);
          .el-table__cell {
            font-weight: inherit;
            background-color: transparent;
            .cell {
              padding-left: var(--merak-table-cell-padding);
              padding-right: var(--merak-table-cell-padding);
            }
          }
        }
      }
      .el-table__row {
        color: var(--merak-table-row-color);
        background-color: var(--merak-table-row-bg-color);
        &:hover,
        &.current-row {
          background-color: var(--merak-table-row-hover);
        }
        .el-table__cell {
          padding-top: var(--merak-table-row-cell-padding);
          padding-bottom: var(--merak-table-row-cell-padding);
          background-color: transparent;
          border-bottom-color: var(--merak-table-border-color);
          .cell {
            padding-left: var(--merak-table-cell-padding);
            padding-right: var(--merak-table-cell-padding);
            line-height: var(--merak-table-line-height);
            .el-button {
              margin: 0;
              padding: 0;
              min-width: auto;
            }
          }
        }
      }
    }
    .el-table__column-resize-proxy {
      border-color: var(--merak-table-resizable-color);
    }
  }
  .vxe-table.vxe-table--render-default {
    color: var(--merak-table-row-color);
    font-size: var(--merak-table-size);
    font-family: var(--el-font-family);
    &.border--default {
      .vxe-header--column,
      .vxe-header--gutter,
      .vxe-body--column,
      .vxe-footer--column {
        background-image: none !important;
      }
      .vxe-body--column {
        border-bottom: 1px solid var(--merak-table-border-color);
      }
      .vxe-table--border-line {
        border: none;
      }
    }
    &.is--empty {
      .vxe-table--fixed-right-wrapper,
      .vxe-table--fixed-left-wrapper {
        box-shadow: none;
      }
      &:hover .vxe-table--fixed-right-wrapper.scrolling--middle {
        box-shadow: var(--vxe-table-fixed-right-scrolling-box-shadow);
      }
      &:hover .vxe-table--fixed-left-wrapper.scrolling--middle {
        box-shadow: var(--vxe-table-fixed-left-scrolling-box-shadow);
      }
    }
    .vxe-table--render-wrapper {
      .vxe-table--header-wrapper {
        color: var(--merak-table-header-color);
        font-size: var(--merak-table-header-size);
        background-color: var(--merak-table-header-bg);
        .vxe-header--row {
          // background-color: var(--merak-table-header-bg);
          &:hover .vxe-resizable,
          &:active .vxe-resizable {
            opacity: 1 !important;
          }
          .vxe-header--column {
            height: var(--merak-table-column-height);
            font-weight: var(--merak-table-weight);
            &.is--sortable {
              cursor: pointer;
            }
            &.col--checkbox .vxe-resizable {
              display: none;
            }
            .vxe-cell {
              padding-left: var(--merak-table-cell-padding);
              padding-right: var(--merak-table-cell-padding);
              max-height: var(--merak-table-column-height);
            }
            .vxe-resizable {
              display: flex;
              top: 50%;
              right: 0;
              width: 5px;
              height: 14px;
              opacity: 0;
              transform: translateY(-50%);
              transition: opacity 0.3s;
              &::before,
              &::after {
                width: 1px;
                height: 100%;
                background-color: var(--merak-table-resizable-color);
              }
              &::after {
                margin-left: 3px;
              }
            }
          }
        }
        .vxe-table--header-border-line {
          border-bottom: none;
        }
      }
      .vxe-table--body-wrapper {
        .vxe-table--body {
          background-color: var(--merak-table-row-bg-color);
          .vxe-body--row {
            // background-color: var(--merak-table-row-bg-color);
            &.row--hover,
            &.row--current,
            &.row--checked {
              background-color: var(--merak-table-row-hover);
            }
            .vxe-body--column {
              .vxe-cell {
                padding-left: var(--merak-table-cell-padding);
                padding-right: var(--merak-table-cell-padding);
                line-height: var(--merak-table-line-height);
              }
            }
          }
        }
      }
      .vxe-table--footer-wrapper {
        border-top: none;
        .vxe-table--footer {
          background-color: transparent;
          .vxe-footer--row {
            .vxe-footer--column {
              .vxe-cell {
                padding-left: var(--merak-table-cell-padding);
                padding-right: var(--merak-table-cell-padding);
              }
            }
          }
        }
      }
      .vxe-table--fixed-wrapper {
        height: 100%;
        & > * {
          height: calc(100% - 10px) !important;
        }
      }
    }
    .vxe-table--empty-placeholder {
      align-items: flex-start;
    }
    .vxe-table--resizable-bar::before {
      background-color: var(--merak-table-resizable-color);
    }
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    height: 20px;
    background-color: var(--merak-table-row-bg-color) !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--merak-table-scroll-color);
  }
  ::-webkit-scrollbar-corner {
    background-color: var(--merak-table-row-bg-color);
  }
}

.dark .merak-table-container {
  --merak-table-header-color: #a3a6ad;
  --merak-table-header-bg: #1d1d1d;
  --merak-table-row-color: #82848f;
  --merak-table-row-hover: #262727;
  --merak-table-row-bg-color: #141414;
  --merak-table-border-color: #363637;
}

.dark .vxe-table--tooltip-wrapper {
  --merak-table-tooltip-color: rgba(146, 146, 148, 1);
  --merak-table-tooltip-text-color: #000;
  --meark-table-tooltip-shadow-color: transparent;
  --meark-table-tooltip-opacity: 0.9;
}

.vxe-table--tooltip-wrapper {
  --merak-table-tooltip-color: #fff;
  --merak-table-tooltip-text-color: #646567;
  --meark-table-tooltip-shadow-color: rgba(0, 23, 40, 0.06);
  --meark-table-tooltip-opacity: 1;
  line-height: 18px;
  color: var(--merak-table-tooltip-text-color) !important;
  font-size: 12px;
  background-color: var(--merak-table-tooltip-color) !important;
  box-shadow: 0px 0px 8px 4px var(--meark-table-tooltip-shadow-color) !important;
  opacity: var(--meark-table-tooltip-opacity);
  backdrop-filter: blur(0px);
  z-index: 3000 !important;
  &.placement--bottom .vxe-table--tooltip-arrow::before {
    top: 8px;
    box-shadow:
      0px 2px 0px 0px var(--meark-table-tooltip-shadow-color),
      0px 0px 0px 0px var(--meark-table-tooltip-shadow-color) !important;
    transform: rotate(135deg) !important;
  }
  .vxe-table--tooltip-content {
    margin-right: -5px;
    padding-right: 5px;
    max-width: 376px;
    max-height: 40vh;
    overflow-y: auto;
  }
  .vxe-table--tooltip-arrow {
    border: none !important;
    bottom: -2px !important;
    transform: translateX(0) !important;
    &::before {
      border-color: transparent !important;
      border-left-color: var(--merak-table-tooltip-color) !important;
      border-bottom-color: var(--merak-table-tooltip-color) !important;
      box-shadow:
        0px 2px 0px 0px var(--meark-table-tooltip-shadow-color),
        0px 0px 0px 0px var(--meark-table-tooltip-shadow-color) !important;
      transform: rotate(-45deg) !important;
    }
  }
}
